<template>
  <view class="container">
    <view class="tip"> 提示:服务期间仅支持修改一次 </view>
    <view class="address-box">
      <view class="title">
        <text>原地址：</text>
      </view>
      <view class="a-box">
        <view class="left">
          <view class="city"> {{ address.address }} </view>
          <view class="info"> {{ address.area }} </view>
          <view class="user">
            {{ address.name }}
            {{ address.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
          </view>
        </view>
      </view>
    </view>
    <view class="address-box select-box">
      <view class="title">
        <text>选择新的地址</text>
        <text class="add" @click="goAddress()">地址管理</text>
      </view>
      <view class="a-box" v-for="(item, index) in addressList" :key="index">
        <view class="left">
          <view class="city"> {{ item.address }} </view>
          <view class="info">
            {{ item.formatted_address }}
          </view>
          <view class="user">
            {{ item.name }}
            {{ item.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
          </view>
        </view>
        <view class="right">
          <image
            @click="check(item, index)"
            :src="
              item.checked
                ? $img_path('/mall/18.png')
                : $img_path('/mall/19.png')
            "
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>

    <view class="bottom-btn">
      <view class="b-btn">
        <view class="b">
          <button @click="confirm()">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { serviceOrderInfo, editOrder } from "@/utils/api/serviceApi.js";
import { getaddress } from "@/utils/api/mallApi.js";
export default {
  data() {
    return {
      // 订单ID
      id: 0,
      // 当前地址
      address: {},
      //   地址列表
      addressList: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    // 获取订单详情
    getDetail() {
      serviceOrderInfo({ id: this.id }).then((res) => {
        this.address = res.data.orderAddress;
        this.getaddress();
      });
    },
    // 获取地址列表
    getaddress() {
      getaddress().then((res) => {
        let arr = res.data.data
          .filter((item) => item.id !== this.address.id)
          .map((item) => {
            return {
              ...item,
              checked: false,
            };
          });
        this.addressList = arr;
      });
    },
    // 选择地址
    check(item, index) {
      this.addressList.forEach((el) => {
        if (el.id !== item.id) {
          el.checked = false;
        }
      });
      item.checked = !item.checked;
    },
    // 点击地址管理
    goAddress() {
      uni.navigateTo({
        url: "/pagesMine/address/index",
      });
    },
    // 点击确认
    confirm() {
      const selected = this.addressList.find((item) => item.checked);
      if (!selected) {
        uni.showToast({
          title: "请选择地址",
          icon: "none",
        });
        return;
      }
      editOrder({
        address_id: selected.id,
		order_id: this.id
      }).then(() => {
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });
        setTimeout(() => uni.navigateBack(), 1000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .tip {
    font-weight: bold;
    font-size: 32rpx;
    color: #e72a2a;
    line-height: 44rpx;
    padding: 22rpx;
    box-sizing: border-box;
    background: #ffeeee;
  }
  .address-box {
    padding: 20rpx 22rpx 0;
    box-sizing: border-box;
    .title {
      text {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
      }
    }
    .a-box {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      .left {
        width: calc(100% - 48rpx);
        padding-right: 52rpx;
        box-sizing: border-box;
        .city {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
          line-height: 42rpx;
        }
        .info {
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
          line-height: 40rpx;
          margin-top: 20rpx;
        }
        .user {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          margin-top: 20rpx;
        }
      }
      .right {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
  .select-box {
    border-top: 20rpx solid #efefef;
    margin-top: 20rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .add {
        font-weight: bold;
        font-size: 34rpx;
        color: #0291ff;
        line-height: 48rpx;
      }
    }
  }

  .bottom-btn {
    width: 100%;
    height: calc(136rpx + constant(safe-area-inset-bottom));
    height: calc(136rpx + env(safe-area-inset-bottom));

    .b-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      .b {
        padding: 20rpx 22rpx;
        box-sizing: border-box;
        button {
          height: 96rpx;
          background: linear-gradient(132deg, #ffa233 0%, #fb4c4c 100%);
          border-radius: 48rpx 48rpx 48rpx 48rpx;
          font-weight: bold;
          font-size: 36rpx;
          color: #ffffff;
          line-height: 96rpx;
        }
      }
    }
  }
}
</style>
